import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';

import LoginPage from '../views/LoginPage';
import AdminLayout from '../layouts/AdminLayout';
import TableList from '../features/admin/TableList';
import AlertConfigList from '../features/admin/ConfigList';
import ColumnsOfTable from '../components/admin/ColumnsOfTable';




function ProtectedRoute({ children }) {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

  if (isAuthenticated) {
    return children; // 用户已登录，正常渲染子组件
  } else {
    return <Navigate to="/login" replace />; // 未登录，跳转到登录页
  }
}

ProtectedRoute.propTypes = {
  children: PropTypes.node.isRequired,
};

const AppRouter = () => {

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/" index="/table-management" element={<ProtectedRoute><AdminLayout><TableList /></AdminLayout></ProtectedRoute>} />
        <Route path="/table-management" element={<ProtectedRoute><AdminLayout><TableList /></AdminLayout></ProtectedRoute>} />
        {/* <Route path="/admin/database-management" element={<ProtectedRoute><AdminLayout><RoleList /></AdminLayout></ProtectedRoute>} /> */}
        
        <Route path="/config" element={<ProtectedRoute><AdminLayout><AlertConfigList /></AdminLayout></ProtectedRoute>} />
      
        <Route path="columns/:tableId/:tableName" element={<ProtectedRoute><AdminLayout><ColumnsOfTable /></AdminLayout></ProtectedRoute>} />
       
        
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;
